<!-- 标准管理->费用管控->新增/编辑/查看 -->
<template>
    <div class="costControl">
        <el-breadcrumb separator="/" class="bread-title">
			<el-breadcrumb-item :to="{ path: '/costControl' }">费用管控</el-breadcrumb-item>
			<el-breadcrumb-item>{{pageType}}</el-breadcrumb-item>
		</el-breadcrumb>
       <el-form ref="typeForm" :rules="rules" :model="typeForm" label-width="205px"  style="width:600px">
           <div class="type-item-box">
                <p class="type-item-title">基本信息</p>
                 <el-form-item label="标准名称：" prop="name">
                        <el-input v-if="typeStatus !='view'" v-model.trim="typeForm.name" autocomplete="off"></el-input>
                        <span v-else>{{typeForm.name}}</span>
                 </el-form-item>
           </div>
           <div class="type-item-box">
                <p class="type-item-title">费用标准</p>
                 <el-form-item label="费用类型：" prop="type">
                        <el-select v-if="typeStatus !='view'" v-model.trim="typeForm.type" @change="peyChange" :disabled="inputDisabled"  placeholder="请选择则费用类型">
                            <el-option 
                            v-for="({label,value},index) in payTypeOptions" 
                            :key="index" 
                            :label="label" 
                            :value="value"></el-option>
                        </el-select>
                         <span v-else>{{typeForm.type|payTypeFilter}}</span>
                </el-form-item>
                 <el-form-item label="科目名称：" prop="subject">
                        <el-select v-if="typeStatus !='view'" v-model.trim="typeForm.subject" :disabled="inputDisabled"  placeholder="请选择则科目名称">
                            <el-option 
                            v-for="({label,value},index) in subjectOptions[typeForm.type] ||[]" 
                            :key="index" 
                            :label="label" 
                            :value="value"></el-option>
                        </el-select>
                         <span v-else>{{typeForm.subject|subjectFilter}}</span>
                </el-form-item>
           </div>
           <div class="type-item-box">
                <p class="type-item-title">计算标准</p>
                 <el-form-item label="统计周期：" prop="cycle">
                        <el-select v-if="typeStatus !='view'" v-model.trim="typeForm.cycle" :disabled="inputDisabled"  placeholder="请选择统计周期">
                            <el-option 
                            v-for="({label,value},index) in statisticalOptions" 
                            :key="index" 
                            :label="label" 
                            :value="value"></el-option>
                        </el-select>
                         <span v-else>{{typeForm.cycle|statisticalFilter}}</span>
                </el-form-item>
                 <el-form-item label="计算方式：" prop="computingMethod">
                       <template v-if="typeStatus !='view'">
                            <el-radio v-model="typeForm.computingMethod" :disabled="inputDisabled || isMethodDisabled" :label="0">当期</el-radio>
                            <el-radio v-model="typeForm.computingMethod" :disabled="inputDisabled || isMethodDisabled" :label="1">累计</el-radio>
                        </template>
                        <span v-else>{{typeForm.computingMethod|computFileter}}</span>
                 </el-form-item>
                  <el-form-item label="计算基数：" prop="computingBase">
                        <el-select v-if="typeStatus !='view'" v-model.trim="typeForm.computingBase"  placeholder="请选择计算基数">
                            <el-option 
                            v-for="({label,value},index) in modalOptions" 
                            :key="index" 
                            :label="label" 
                            :value="value"></el-option>
                        </el-select>
                         <span v-else>{{typeForm.computingBase|baseFilter}}</span>
                </el-form-item>
                <el-form-item label="计算比例：" prop="computingProportion">
                    <div v-if="typeStatus !='view'" style="display:flex">
                        <el-input  v-model.trim="typeForm.computingProportion" autocomplete="off"></el-input><div class="unit-box">%</div>
                    </div>
                    <span v-else>{{typeForm.computingProportion}}%</span>
                 </el-form-item>
           </div>
           <div style="padding:10px 0">
               <el-form-item label="超出标准允许发起审批流程：" prop="approvalFlag">
                       <template v-if="typeStatus !='view'">
                            <el-radio v-model="typeForm.approvalFlag" :label="1">是</el-radio>
                            <el-radio v-model="typeForm.approvalFlag" :label="0">否</el-radio>
                        </template>
                        <span v-else>{{typeForm.approvalFlag?"是":"否"}}</span>
                 </el-form-item>
           </div>
          
       </el-form>
       
       <p v-if="typeStatus !='view'" style="text-align:center">
            <el-button type="primary"  @click="loadApproval">发起审批</el-button>
            <el-button type="primary" v-if="typeStatus =='add'" @click="addSave(0)">保存</el-button>
            <el-button type="primary" v-if="typeStatus =='edit'" @click="editSave(0)">保存</el-button>
            <el-button type="primary"  @click="back">取消</el-button>
        </p>
        <!-- 审核记录 -> 详情页面显示 -->
        <template  v-else>
            <audit-table :tableData='auditData'></audit-table>
            <p style="text-align:center"> 
                 <el-button type="primary"  @click="back">关闭</el-button>
            </p>
           
        </template>
        
    </div>
    
</template>

<script>
import api from '@/api/apiPath'
import auditTable from '../common/auditTable' //审核记录表
export default {
    components: {
        'audit-table':auditTable,
    },
    computed:{
        inputDisabled(){
            return this.typeForm.status == 2;
        }
       
    },
	data () {
		return {
            isMethodDisabled:false,
            payTypeOptions:[
                {label:"管理费用",value:0},
                {label:"运营费用",value:1},
                {label:"财务费用",value:2},
                {label:"税金",value:3},
            ],
            subjectOptions:[
                [
                    {label:"人工成本",value:0},
                    {label:"公司类费用",value:1},
                    {label:"研发费用",value:2},
                ],
                [
                    {label:"运营费用",value:3},
                    {label:"推广费用",value:4},
                ],
                [
                    {label:"手续费用",value:5},
                    {label:"金融类",value:6},
                ],
                [
                    {label:"税费",value:7},
                ]
            ],
            statisticalOptions:[
                {label:"月度",value:0},
                {label:"季度",value:1},
                {label:"半年",value:2},
                {label:"整年",value:3},
            ],
            modalOptions:[
                {label:"经营业绩",value:0},
                {label:"刷卡金额",value:1},
                {label:"实际支出",value:2},
            ],
            auditData:[],
            typeForm:{
                approvalFlag:1,
                computingMethod:0,
            },
            typeStatus:"",
            pageType:"",
            typeFunction:{//页面状态
                add:()=>{
                    this.pageType = "新增";
                    
                    },
                edit:(id)=>{this.pageType = "编辑";
                    this.loadFromDetail(id);//加载表单信息
                    
                 
                },
                view:(id)=>{ this.pageType = "详情";
                    this.loadFromDetail(id);
                }
            },
            rules:{//验证
               name:[
                    {required: true, trigger: ['blur', 'change'] ,validator: (rule, value, callback) => {
                            if(!value && value!=0) {
                                    return callback(new Error('请输入标准名称'));
                            }
                            if(value.length>20){
                                    return callback(new Error('标准名称长度不能大于20'));
                            }
                            callback();
                        }
                    }
                ],
                type: [
                   { required: true, message: '请选择费用类型', trigger: ['blur', 'change']}
                ],
                subject: [
                   { required: true, message: '请选择科目名称', trigger: ['blur', 'change']}
                ],
                computingBase: [
                   { required: true, message: '请选择计算基数', trigger: ['blur', 'change']}
                ],
                cycle: [
                   { required: true, message: '请选择统计周期', trigger: ['blur', 'change']}
                ],
                computingMethod: [
                   { required: true, message: '请选择计算方式', trigger: ['blur', 'change']}
                ],
                computingProportion:[
                    {
                        required: true,
                        validator: (rule, value, callback) => {
                            let flatReg = /^\d+(\.\d{0,2})?$/;
                            if(!value && value!==0) return callback(new Error('不可为空'));
                            if(!flatReg.test(value)){
                                    return callback(new Error('格式不正确'));
                            }
                            if(value>100) this.typeForm.computingProportion = 100;
                            callback();
                        }
                    }
                ],
          
                approvalFlag: [
                   { required: true, message: '请选择是否超出标准允许发起审批流程', trigger: ['blur', 'change']}
                ],
            },
        }
    },
    methods:{
        addSave(status){
            this.$refs.typeForm.validate((valid)=>{
                if(!valid){
                    return
                }
                let params = {
                    ...this.typeForm,
                    status:status
                }
                this.axios.post(api.addCostControlList,params).then((res)=>{
                    if(res.data.code==200){
                         let text = ['添加成功','已发起审批']
                        this.$alert(text[status], '提示', {
                                type: 'success',
                                confirmButtonText: '确定',
                                callback: action => {
                                        this.$router.go(-1)
                                    }
                        });
                    }
                }).catch((error)=>{
                        console.log(error)
                })
            })
            
        },
        editSave(status){
            this.$refs.typeForm.validate((valid)=>{
                if(!valid){
                    return
                }
                let params = {
                   ...this.typeForm,
                   status:status
                }
               
                this.axios.post(api.editCostControlList,params).then((res)=>{
                    if(res.data.code==200){
                        let text = ['编辑成功','已发起审批']
                        this.$alert(text[status], '提示', {
                                type: 'success',
                                confirmButtonText: '确定',
                                callback: action => {
                                        this.$router.go(-1);
                                    }
                        });
                    }
                }).catch((error)=>{
                        console.log(error)
                })
            })
        },
        back(){
            this.$router.go(-1);
        },
        //加载当前页面表单详情
        loadFromDetail(id){
            this.axios.get(api.getCostControlDetail+'/'+id).then(res => {
                if (res.data.code == 200) {
                    this.typeForm  = res.data.data;
                    this.auditData = res.data.data.logInfoList
                }
            })
        },
        //发起审批
        loadApproval(){
            if(this.typeStatus =='add') this.addSave(1);
            if(this.typeStatus =='edit') this.editSave(1);
        },
        peyChange(val){
            this.$set(this.typeForm,'subject',null);
            this.$nextTick(()=>{
                this.$refs.typeForm.clearValidate('subject');
            })
            if(val === 2 || val === 3){
                this.isMethodDisabled = true;
                this.typeForm.computingMethod = 0;
            }else{
                this.isMethodDisabled = false;
            }
        }
	},
	created () {
       let {pageType,insideId} = this.$route.query;
       //更改页面状态（新增/编辑/查看）
       this.typeStatus = pageType;
       this.insideId = insideId;
       //执行该状态init()
       this.typeFunction[pageType](insideId);
    },
	destroyed() {
		
	},
	filters: {
        
        payTypeFilter(code){
            return ['管理费用','运营费用','财务费用','税金'][code]
        },
        
        subjectFilter(code){
            return ['人工成本','公司类费用','研发费用','运营费用','推广费用','手续费用','金融类','税费'][code];
        },
        statisticalFilter(code){
            return ['月度','季度','半年','整年'][code];
        },
        computFileter(code){
            return ['当期','累计'][code]
        },
        baseFilter(code){
            return ['经营业绩','刷卡金额','实际支出'][code];
        }
	}
}

</script>

<style lang="stylus" >
.costControl{
    p{
        margin:0;
        padding:20px 0;
    }
    .type-item-title{
        font-size:18px;
        color:#303133;
        font-weight :700;
    }
    .back-btn{
        padding:30px 0;
        text-align :center;
    }
    .type-item-box{
        padding-bottom 20px;
        border-bottom :1px solid #ddd;
    }
    .unit-box{
        min-width: 40px;
        text-align:right;
    }
}
.posterurl .el-form-item__label:before{
    content: '*';
    color: #f56c6c;
    margin-right: 4px;
}

</style>
